<template>
	{{ obj.a }}
	<div class="box" @click="box.add()" :style="style">{{ box.name }} : {{ box.a }} : {{ box.b }}</div>
	<Checkbox v-model="item.selected" v-for="(item, index) in this.box.checkList" :key="index">{{ item.label }}</Checkbox>
	<CheckboxGroup v-model="this.box.checkListGroup.value">
		<Checkbox :label="item.label" :key="index" v-for="(item, index) in this.box.checkListGroup.list"></Checkbox>
	</CheckboxGroup>
	<Row>
		<Button type="default" @click="box.add()">操作0</Button>
		<Button type="default" @click="box.jump()">操作1</Button>
		<Button type="default" @click="box.run()">操作2</Button>
		<Button type="default" @click="box.scale(0.5)">操作3</Button>
		<Button type="default" @click="box.moveTo(100, 100)">操作4</Button>
		<Button type="default" @click="box.getCheckList()">操作5</Button>
		<Button type="default" @click="box.getCheckListGroup()">操作6</Button>
	</Row>
</template>
<script>
import { SpecialBox } from './251013.test';
export default {
	data() {
		return {
			a: 1,
			b: 2,
			box: null
		}
	},
	computed: {
		style() {
			return {
				width: this.box.width + 'px',
				height: this.box.height + 'px',
				transform: `translate(${this.box.x}px,${this.box.y}px)`
			}
		},
		obj() {
			return this.box.obj;
		}
	},
	methods: {
		add() {
			console.log(`helloworld`);
		},
	},
	created() {
		this.box = new SpecialBox();
		console.log(this.box);
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
</style>